<script setup>
import { ElMessage, ElSwitch } from 'element-plus'
import { ref } from 'vue'
import DeviceItem from './DeviceItem.vue'
import { useDeviceStore } from '../stores/device'
import { storeToRefs } from 'pinia'

const deviceStore = useDeviceStore()

const { devices } = storeToRefs(deviceStore)

// 是否仅显示在线设备
const showOnlineOnly = ref(false)
const useTable = ref(false)
</script>

<template>
    <div class="sub-title">设备列表</div>
    <div>
        总设备数量{{ devices.length }}，在线设备数量{{
            deviceStore.onlineDevices.length
        }}，已评分的设备数量{{
            deviceStore.hasScoreDevices.length
        }}，仅显示在线设备<el-switch
            v-model="showOnlineOnly"
        />，以表格形式显示<el-switch v-model="useTable" />
    </div>
    <div class="device-list" :class="{ 'use-table': useTable }">
        <template v-for="i in devices" :key="i.id">
            <device-item
                v-show="!showOnlineOnly || i.online"
                :useTable="useTable"
                :id="i.id"
                :score="i.score"
                :online="i.online"
                :msg="i.msg"
                :current="i.current"
            />
        </template>
    </div>
</template>

<style scoped>
.use-table {
    padding: 40px;
}

.sub-title {
    font-size: 24px;
    font-weight: bold;
    margin-top: 50px;
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 5px solid #409eff;
}
.device-list {
    display: flex;
    flex-wrap: wrap;
}
</style>
